<!DOCTYPE html> 
<html>
	<head>
		<title>Moodle Question Maker</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/> 
		<link rel="stylesheet" type="text/css" href="css/topMenu.css"/> 
		<link rel="stylesheet" type="text/css" href="css/sideBar.css"/>
		<link rel="stylesheet" type="text/css" href="css/preview.css"/> 
		<link rel="stylesheet" type="text/css" href="css/questionSeeds.css"/> 
		<link rel="SHORTCUT ICON" type="text/css" href="gfx/qbuilder.ico"/> 
	</head>
	<body>
		<div class="top-menu"></div>
		<div class="content">
			<div class="side-content">
			</div><div class="preview-container">
				<div class="preview"></div>
				<div class="tabs"></div>
			</div>
		</div>
		
		<input type="file" class="file-input" style="display:none">
		<script id="top-menu-button-tmpl" data-tmpl-id="top-menu-button-tmpl" type="text/x-jquery-tmpl">
			<div class="top-menu-button"><img src=${img} alt=" " style="vertical-align:-5%;"> ${label}</div>
		</script>
		
		
		<script id="preview-tmpl" data-tmpl-id="preview-tmpl" type="text/x-jquery-tmpl">
		</script>
		
		
		<script id="export-dialogue-tmpl" data-tmpl-id="export-dialogue-tmpl" type="text/x-jquery-tmpl">
			<div class="export-dialogue">
				<span class="linear-field">File Name: </span><input type="text" class="file-name"><br>
				<span class="linear-field">Number to Generate: </span><input type="text" class="num-questions"><br>
				<br>
				<div style="text-align:right;">
					<button class="button okay">OK</button>
					<button class="button cancel">Cancel</button>
				</div>
			</div>
		</script>
		
		<script id="side-bar-tmpl" data-tmpl-id="side-bar-tmpl" type="text/x-jquery-tmpl">
			<div class="side-bar">
				<div class="top">
					<div class="styled-select">
						<select class="type-select">
							<option data-value="mc-bank">Generated Multiple Choice</option>
							<option data-value="mc">Multiple Choice</option>
						</select>
					</div>
				</div>
				<div class="middle">
				</div>
				<div class="bottom">
					<button class="button addUpdate">Add</button>
				</div>
			</div>
		</script>
		
		<script id="mc-bank-tmpl" data-tmpl-id="mc-bank-tmpl" type="text/x-jquery-tmpl">
			<div class="seed mcbank-seed">
				{{each(index, value) name}} 				
					<div> 
						<div>Name: ${value}</div>
						<div>Question:
						{{if qtexts[index]}}
							${qtexts[index]}
						{{/if}}
						</div>
						<div>Answer:
						{{if atexts[index]}}
							${atexts[index]}
						{{/if}}
						</div>
						<div>Feedback:
						{{if feedback[index]}}
							${feedback[index]}
						{{/if}}
						</div>
					</div>
					<hr>
				{{/each}}
				{{if numQuestions}}
					<div>Number to Generate: ${numQuestions}</div>
				{{/if}}
				</div>
			</div>
		</script>
		
		<script id="mc-bank-sidebar-tmpl" data-tmpl-id="mc-bank-sidebar-tmpl" type="text/x-jquery-tmpl">
			<div class="sidebar-seed mcbank-sidebar">
				<div class="particles">
					{{each(index, value) name}} 
						<div class="mc-bank-particle">
							<div>Name: </div><input data-attribute="name" class="seed-data seed-data-array" value="${value}"/><br>
							<div>Question Text: </div><textarea data-attribute="qtexts" class="seed-data seed-data-array">${qtexts[index]}</textarea><br>
							<div>Answer Text: </div><textarea data-attribute="atexts" class="seed-data seed-data-array">${atexts[index]}</textarea><br>
							<div>Feedback: </div><textarea data-attribute="feedback" class="seed-data seed-data-array">${feedback[index]}</textarea><br>
						</div>
					{{/each}}
					<div class="mc-bank-particle">
						<div>Name: </div><input data-attribute="name" class="seed-data seed-data-array"/><br>
						<div>Question Text: </div><textarea data-attribute="qtexts" class="seed-data seed-data-array"/><br>
						<div>Answer Text: </div><textarea data-attribute="atexts" class="seed-data seed-data-array"/><br>
						<div>Feedback: </div><textarea data-attribute="feedback" class="seed-data seed-data-array"/><br>
					</div>
				</div>
				<div class="other-input">
					<div>Number to Generate: </div><input class="seed-data seed-data-single" data-attribute="numQuestions" value="${numQuestions}"/>
				</div>
			</div>
			
		</script>
		
		<script id="mc-bank-particle-tmpl" data-tmpl-id="mc-bank-particle-tmpl" type="text/x-jquery-tmpl">
			<div class="mc-bank-particle">
				<div>Name: </div><input data-attribute="name" class="seed-data seed-data-array"/><br>
				<div>Question Text: </div><textarea data-attribute="qtexts" class="seed-data seed-data-array"/><br>
				<div>Answer Text: </div><textarea data-attribute="atexts" class="seed-data seed-data-array"/><br>
				<div>Feedback: </div><textarea data-attribute="feedback" class="seed-data seed-data-array"/><br>
			</div>
		</script>
		
		<script id="mc-tmpl" data-tmpl-id="mc-tmpl" type="text/x-jquery-tmpl">
			<div class="seed mc-seed">
				test mc<br>
				another line
			</div>
		</script>
		
		<script id="mc-sidebar-tmpl" data-tmpl-id="mc-sidebar-tmpl" type="text/x-jquery-tmpl">
			<div class="sidebar-seed mc-sidebar">
				sidebar test mc<br>
				another line
			</div>
		</script>
	
		
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery-ui.js"></script>
		<script type="text/javascript" src="js/jquery-tmpl.js"></script>
		<script type="text/javascript" src="js/templates.js"></script>
		<script type="text/javascript" src="js/QuestionTypes/MCBank.js"></script>
		<script type="text/javascript" src="js/XML-Parser.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<script type="text/javascript" src="js/topMenu.js"></script>
		<script type="text/javascript" src="js/sideBar.js"></script>
		<script type="text/javascript" src="js/preview.js"></script>
	</body>
</html>
